
var IndexView = View.extend(IndexView = {
    init: function() {
        this._super();
        this.configure();
    },
    configure: function() {
        this.configureTable();
        this.configureToolbar();
        this.configureButtons();
        this.configureProfileEditor();
    },
    configureTable: function() {
        // Show menu when #myDiv is clicked
        this.reloadTableView();
    },
    configureButtons: function() {
        var self = this;

        $("#add_btn").click(function() {
            var url = $(this).data('url');
            self._loadProfileEditor(url);
        });

        $("#edit_btn").click(function() {
            var member_id = self.getSelectedMemberId();
            var url = $(this).data('url') + "/" + member_id;

            self._loadProfileEditor(url, true);
        });
    },
    configureProfileEditor: function() {

        $("#profile_editor #save-changes").click(function() {
            $("#profile_editor #profile-form").submit();
        });
    },
    
    /**
     * 
     * @returns {void}
     */
    configureToolbar: function() {
        var self = this;

        $("#delete-menu").click(function(e) {
            e.preventDefault();
            
            var url = $(this).attr('href');
            var member_id = self.getSelectedMemberId();
            
            confirm("Continuing with this action will delete the selected members.", function() {
                
                $.post(url, {member_id: member_id}, function() {
                    $("#list-table tbody tr.selected").remove();
                    
                    $.pnotify({
                        title: 'Deletion Success',
                        text: "Member(s) Successfully Deleted!", // To Undo Delete <a href='#'>Click Here</a>",
                        type: 'success'
                    });
                });
            });
        });
        
        $("#member-search-form").submit(function(e) {
            e.preventDefault();
            
            var url = $(this).attr('action');
            var params = {
                text: $("#member-search-form #member-search").val()
            };
            
            $.ajax({
                url: url,
                data: params,
                type: 'post',
                success: function(data) {
                    $("#table-view .content").html(data);
                    self.reconfigureTableView();
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                }
            });
        });
    },
            
    _loadProfileEditor: function(url, editing) {

        var self = this;
        self.editing = editing;

        $.get(url, function(data) {

            //$("#profile-view #profile_view_pane").hide();
            //$("#profile-view #editor_view").show().find(".content").html(data);
            $("#profile_editor").find(".modal-body").html(data);
            $("#profile_editor").modal('show');
            $('#profile_editor .modal-body').css({width: 'auto', height: 'auto', 'max-height': '100%'});

            $("#profile-form").submit(function(e) {
                e.preventDefault();

                var url = this.action;
                var query = $(this).serialize();

                $.ajax({
                    url: url,
                    data: query,
                    type: 'post',
                    dataType: 'json',
                    success: function(data) {
                        $("#profile_editor").modal('hide');
                        
                        if (self.editing) {
                            self.reloadSelectedProfile();
                        }
                        else {
                            self.reloadTableView();
                            
                            /*$.pnotify({
                                title: 'Member Added',
                                text: 'New Member Added Successfully With ID <b>' + data.Member.organisation_no + "</b>",
                                type: 'success'
                            });*/
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                    }
                });

                return false;
            });
        });
    },
    /**
     * 
     * @returns {int}
     */
    getSelectedMemberId: function() {
        var member_id = null;

        if ($("#list-table tbody tr.selected").length > 0) {
            member_id = $("#list-table tbody tr.selected").data('member-id');
        }

        return member_id;
    },
            
    /**
     * 
     * @returns {void}
     */
    reloadTableView: function() {
        var self = this;
        var url = $("#table-view").data('url');

        $.get(url, function(data) {
            $("#table-view .content").html(data);

            self.reconfigureTableView();
        });
    },
            
    reconfigureTableView: function() {  
        $("#list-table tbody tr").click(function() {
            $("#list-table tbody tr").removeClass("selected");

            $(this).addClass("selected");

            var url = $(this).data('url');

            $.get(url, function(data) {
                //$("#profile-view .content").html(data);
                $("#profile-view #editor_view").hide();
                $("#profile-view #profile_view_pane").show().find(".content").html(data);
            });
        });

        $("#list-table").contextMenu({
            menu: 'myMenu'
        }, function(action, el, pos) {
            alert(
                    'Action: ' + action + '\n\n' +
                    'Element ID: ' + $(el).attr('id') + '\n\n' +
                    'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' +
                    'X: ' + pos.docX + '  Y: ' + pos.docY + ' (relative to document)'
                    );
        });

        $("#list-table tbody tr:first").click();
    },
    /**
     * Force refresh selected profile
     * 
     * @returns {void}
     */
    reloadSelectedProfile: function() {
        $("#list-table tbody tr.selected").click();
    },
    /**
     * Triggers the action to delete a member from the server
     * 
     * @param int member_id
     * @returns {void}
     */
    deleteMemberProfile: function(member_id) {
        var url = $();
    }
});

$(document).ready(function() {
    var index = new IndexView();
    App.getController().setView(index);
});